<template>
    <div class="wrapper">
        <div class="info">
            <div class="info_edit iconfont" >&#xe68a;</div>
            <div class="info_mgs">
                <div class="info_mgs_top">
                    <div class="info_mgs_top_name">热心市民李先生</div>
                    <div class="info_mgs_top_id">ID: 1069643013</div>
                </div>
                <div class="info_mgs_bottom">
                    <div class="info_mgs_bottom_item">
                        <div class="info_mgs_bottom_big">红包</div>
                        <div class="info_mgs_bottom_small">218</div>
                    </div>
                    <div class="info_mgs_bottom_item">
                        <div class="info_mgs_bottom_big">红包</div>
                        <div class="info_mgs_bottom_small">12张</div>
                    </div>
                    <div class="info_mgs_bottom_item">
                        <div class="info_mgs_bottom_big">红包</div>
                        <div class="info_mgs_bottom_small">88</div>
                    </div>
                    <div class="info_mgs_bottom_item">
                        <div class="info_mgs_bottom_big">红包</div>
                        <div class="info_mgs_bottom_small">1000</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="option">
            <div class="option_wallet">
                <span class="iconfont option_wallet_font">&#xe785;</span>
                我的钱包
                <span class="iconfont option_wallet_next">&#xe610;</span>
                <div></div>
            </div>
             <div class="option_add">
                <span class="iconfont option_add_font">&#xe60d;</span>
                我的地址
                <span class="iconfont option_add_next">&#xe610;</span>
                <div></div>
            </div> 
            <div class="option_customer">
                <span class="iconfont option_customer_font">&#xe622;</span>
                客服与帮助
                <span class="iconfont option_customer_next">&#xe610;</span>
                <div></div>
            </div>
        </div>


        <Docker :currentIndex='3'/>
    </div>
</template>

<script>
import Docker from '../../components/Docker.vue'
export default {
    name:'My',
    components:{ Docker },
    setup() {
        
    }
}
</script>   

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixins';
.wrapper{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: $bgColor;
    overflow-y: scroll; 
}
.info{
        position: relative;
        height: 1rem;
        background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
        padding: .4rem .18rem 0;
        margin-bottom: 1.5rem;
        &_edit{
            position: absolute;
            right: .18rem;
            color: $bgColor;
            font-size: .2rem;
        }
        &_mgs{
            margin-top: .3rem;
            padding: .6rem .28rem .16rem;
            background: $bgColor;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
            border-radius: 8px;
            &_top{
                text-align: center;
                border-bottom: .01rem solid $content-bgcolor;
                &_name{
                    font-size: 24px;
                    color: #262628;
                    letter-spacing: 0.19px;
                    text-align: center;
                    line-height: 36px;
                    margin-bottom: .02rem;
                }
                &_id{
                    font-size: 14px;
                    color: #C1C0C9;
                    text-align: center;
                    margin-bottom: .12rem;
                }
            }
            &_bottom{
                display: flex;
                padding: .12rem 0 .16rem;
                &_item{
                    flex: 1;
                }
                &_big{
                    font-size: 12px;
                    color: #C1C0C9;
                    text-align: center;
                    margin-bottom: .03rem;
                }
                &_small{
                    font-size: 20px;
                    color: #262628;
                    text-align: center;
                }
            }
        }
    }
.option{
    padding: .16rem;
    margin: 0 .18rem;
    &_wallet{
        position: relative;
        font-size: .2rem;
        color: #262626;
        line-height: .25rem;
        margin-bottom: .24rem;
        &_font{
            font-size: .3rem;
            margin-right: .3rem;
            color: $bgColor;
            background: #ED4A47;
            border-radius: 8px;
            padding: .03rem;
        }
        &_next{
            position: absolute;
            right: 0;
            font-size: .2rem;
            color: #C2C4CA;
        }
    }
    &_add{
        position: relative;
        font-size: .2rem;
        color: #262626;
        line-height: .25rem;
        margin-bottom: .24rem;
        &_font{
            font-size: .3rem;
            margin-right: .3rem;
            color: $bgColor;
            background: #32C5FF;
            border-radius: 8px;
            padding: .03rem;
        }
        &_next{
            position: absolute;
            right: 0;
            font-size: .2rem;
            color: #C2C4CA;
        }
    }
    &_customer{
        position: relative;
        font-size: .2rem;
        color: #262626;
        line-height: .25rem;
        &_font{
            font-size: .3rem;
            margin-right: .3rem;
            color: $bgColor;
            background: rgba(144,19,254,0.92);
            border-radius: 8px;
            padding: .03rem;
        }
        &_next{
            position: absolute;
            right: 0;
            font-size: .2rem;
            color: #C2C4CA;
        }
    }
}
</style>